<template>
  <Swiper class="x-swiper" :width="boxWidth"
    :autoplay="cfg.autoplay === 'true' ? { delay: (cfg.delay * 1000) || 3000, disableOnInteraction: false } : false"
    :slides-per-view="1" :space-between="0" :centered-slides="true" :slides-offset-before="slidesOffset"
    :style="{ top: cfg.style.top }" @init="onInit">
    <swiper-slide v-for="x, i in cfg.data" :key="x.id" class="x-swiper-item">
      <div class="item-card">
        <div class="triangle one"></div>
        <div class="triangle two"></div>
        <div v-if="x.title" class="swiper-item-title relative">
          {{ x.title }}
        </div>
        <swiper-child-item :data="x" :real-index="i" :axis-id="cfg.axis_id" :swiper="swiperExp" />
      </div>
    </swiper-slide>
  </Swiper>
</template>
<script lang="ts" setup name="SwiperNormal">

const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});
const boxWidth = computed(() => Number(window.innerWidth * 0.6));
const slidesOffset = computed(() => (window.innerWidth - boxWidth.value) / 2);
const swiperExp = ref(null)

const onInit = (swiper) => {
  swiperExp.value = swiper
}
</script>

<style scoped lang="scss">
.x-swiper {
  @apply absolute overflow-hidden left-0 z-100;
  top: 35%;
  width: 100vw;

  :deep(.swiper-wrapper) {
    align-items: center;
  }

  .swiper-box {
    @apply flex flex-nowrap;
    transition-duration: 300ms;
  }

  .x-swiper-item {
    @apply text-white relative flex flex-col items-center;
    padding: 4px;
    transition-duration: 300ms;
    transform: scale(0.75);

    &.active,
    &.swiper-slide-active {
      transform: scale(1);
    }

    .swiper-item-title {
      @apply text-center block whitespace-nowrap overflow-ellipsis overflow-hidden relative z-2;
      font-size: 14px;
      margin-bottom: 8px;
      min-height: 18px;
    }
  }

  .item-card {
    @apply relative cursor-pointer w-full h-full;
    box-sizing: border-box;
    border: 1px solid #46618d;
    border-radius: 6px;

    &::after {
      content: "";
      @apply absolute top-0 left-0 right-0 bottom-0 z-1 backdrop-filter backdrop-blur-60;
      background: rgba(0, 0, 0, 0.25) url(../../assets/images/img-bg.png) no-repeat center center / cover;
      border-radius: 6px;
    }

    .triangle {
      @apply absolute z-0;
      width: 54px;
      height: 56px;
      border-radius: 6px;

      &::before,
      &::after {
        content: "";
        @apply absolute;
        border-radius: 6px;
      }

      &::before {
        width: 80%;
        height: 12px;
      }

      &::after {
        width: 12px;
        height: 80%;
      }

      $position: -4px;

      &.one {
        top: $position;
        left: $position;
        background: linear-gradient(132deg,
            theme("colors.primary") 0%,
            theme("colors.primary") 6%,
            transparent 56%);

        &::before {
          top: 0;
          left: 4px;
          background: linear-gradient(180deg,
              theme("colors.primary") 0%,
              theme("colors.primary") 32.9%,
              transparent 33%);
        }

        &::after {
          top: 4px;
          left: 0;
          background: linear-gradient(90deg,
              theme("colors.primary") 0%,
              theme("colors.primary") 32.9%,
              transparent 33%);
        }
      }

      &.two {
        bottom: $position;
        right: $position;
        background: linear-gradient(316deg,
            theme("colors.primary") 0%,
            theme("colors.primary") 6%,
            transparent 56%);

        &::before {
          bottom: 0;
          right: 4px;
          background: linear-gradient(0deg,
              theme("colors.primary") 0%,
              theme("colors.primary") 32.9%,
              transparent 33%);
        }

        &::after {
          bottom: 4px;
          right: 0;
          background: linear-gradient(-90deg,
              theme("colors.primary") 0%,
              theme("colors.primary") 32.9%,
              transparent 33%);
        }
      }
    }
  }
}
</style>